<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dialog demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <style type="text/css">
	#workspaceContainer {
		width: 1000px;
	}
  
	#tools {
		float: left;
		width: 320px;
	}
  
	#workspace {
		//float: right;
		margin: 10px auto;
		width: 850px;
		height: 750px;
		background-color: yellow;
	}
	
	.tool {
		height: 75px;
		border: 1px solid black;
	}
	
	.toolTitle{
		margin-left: 5px;
	}
	
	.slider {
		float: left;
		width: 150px;
		margin-top: 15px;
		margin-left: 5px;
	}
	
	.sliderLabel {
		top: 0;
		float: right;
	}
	
	#imageSizeSliderValue .label {
		margin-right: 5px;
	}
	
	/*
	Also if you use float it affectivly removes that element from any surrounding div. To get around this problem try and add a div class which has 'clear' set to 'both' to your html. This make all the divs sit nicely in there container
	Like this:
	*/
	.clear { 
		clear: both;
	}
  </style>
</head>
<body>
 
		<div id="workspace">
			<div id="imageLayer">
				<img src="/canvas.jpg" width="200" height="200"/>
			</div>
		</div>
 
<script>

jQuery("#workspace #imageLayer img").resizable({
	handles: 'all'
}).parent().draggable({
	containment: $("#workspace")
});
/*$("#workspace #imageLayer img").draggable().resizable();
$("#workspace #imageLayer img").draggable({
	containment: $("#workspace")

});*/

</script>
 
</body>
</html>